﻿
<style>
    .bui-list .bui-btn i {
        font-size: 0.4rem;
        margin-right: 0.2rem;
    }
</style>
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main">list</div>
        <div class="bui-bar-right">
        </div>
    </header>
    <main>
        <div id="scrollBaidu" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list">
                    
                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>
        <div class="bui-panel">
            <div class="bui-panel-head"><strong>示例:</strong></div>
            <div class="bui-panel-main">
                <div class="container">
                <h4>html:</h4>
                <xmp>
<div id="scroll" class="bui-scroll">
  <div class="bui-scroll-head"></div>
  <div class="bui-scroll-main">
    <ul id="scrollList" class="bui-list">
    </ul>
  </div>
  <div class="bui-scroll-foot"></div>
</div>
// 百度模板
<script id="test1" type="text/html">
    <%for(var i=0;i<9;i++){%>
        <li class="bui-btn" href="index.html"><i class="icon-facefill"></i><%=list[i]["name"]%></li>
    <%}%>
</script>
                </xmp>
                <h4>js:</h4>
                <xmp>

bui.ready(function () {
    
    var uiList = bui.list({
        id: "#scroll",
        url: siteDir + "userlist.json",
        page:1,
        pageSize:5,
        height: 300,
        template: template,
        //如果分页的字段名不一样,通过field重新定义
        field: {
            page: "page",
            size: "pageSize",
            data: "data"
        },
        onRefresh: function (scroll) {
            //刷新的时候执行
        },
        onLoad: function (scroll) {
            console.log( this.option("page") );

        },
        callback: function (e) {
            // 点击整行的时候执行
        }
    });

    //手动刷新
    // uiList.widget("scroll").refresh();

})

//生成模板
function template (data,dataObj) {

    // 生成百度模板
    var html = baidu.template('test1',{list:data});
    return html;
}

                </xmp>
                </div>
            </div>
        </div>
    </main>
</div>
<script id="test1" type="text/html">
    <!-- 循环语句 for-->
    <%for(var i=0;i<9;i++){%>
        <li id="fds" class="bui-btn" href="index.html"><i class="icon-facefill"></i><%=list[i]["name"]%></li>
    <%}%>
</script>
